<template>
  <div class="aske">
    <div>
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="60" :src="circleUrl"></el-avatar>
        </div>
      </div>
    </div>
    <el-scrollbar>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse-transition="false"
        router
        unique-opened
        :collapse="collapse"
      >
        <navbar-item :menus="menus"></navbar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import ing from "../ing/haimianbb.jpg";
import NavbarItem from "./NavbarItem.vue";
export default {
  components: {
    NavbarItem,
  },
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      circleUrl: ing,
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  props: {
    menus: {
      type: Array,
      require: true,
    },
    collapse: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
.el-menu {
  height: 100%;
  border-right: none;
  max-width: 200px;
}

.el-menu[data-v-c735de7a] {
  text-align: left;
  max-width: 200px;
}
.el-menu {
  max-width: 200px;
}
.aske {
  background-color: rgb(84, 92, 100);
}
</style>